<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			.body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: linear-gradient(45deg, #006bc6, #1ecafc);
				font-family: Comic Sans MS /* 'Oleo Script Swach Caps' cursive */;
			}
			
			.containers {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.containers h2 {
				position: absolute;
				color: #fff;
				font-size: 1.75em;
				font-weight: 500;
			}
			
			.loader {
				position: relative;
				width: 300px;
				height: 300px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.25);
				filter: url(#Gooey);
			}
			.loader span {
				position: absolute;
				left: 0;
				transform-origin: 150px;
				width: 100px;
				height: 100px;
				background-color: #fff;
				border-radius: 50%;
				animation: animates 5s ease-in-out infinite;
				animation-delay: calc(0.15s * var(--i));
			}
			
			@keyframes animates {
				0%, 10% {
					width: 100px;
					height: 100px;
					transform: rotate(0deg) translateX(120px);
				}
				40%, 70% {
					width: 40px;
					height: 40px;
					transform: rotate(calc(360deg / 8 * var(--i)));
					box-shadow: 0 0 0 10px #fff;
				}
				90%, 100% {
					width: 100px;
					height: 100px;
					transform: rotate(0deg) translateX(120px);
				}
			}
			svg {
				width: 0;
				height: 0;
			}
		</style>
	</head>
	<body>
		<div class="body">
			<div class="containers">
				<h2>CharlieWu</h2>
				<div class="loader">
					<span style="--i:0;"></span>
					<span style="--i:1;"></span>
					<span style="--i:2;"></span>
					<span style="--i:3;"></span>
					<span style="--i:4;"></span>
					<span style="--i:5;"></span>
					<span style="--i:6;"></span>
					<span style="--i:7;"></span>
				</div>
			</div>
			<!-- filter  -->
			<svg>
				<filter id="Gooey">
					<feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
					<feColorMatrix Values="
						1 0 0 0 0
						0 1 0 0 0
						0 0 1 0 0
						0 0 0 20 -10
					"></feColorMatrix>
				</filter>
			</svg>
		</div>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script>
			$(function() {
				setTimeout(function() {
					$('.body').fadeOut('slow')
				},4000);
				
				setTimeout(function () { test(); }, 5000);
				function test(){
					location.href = './pages/index.html'
				}
			})
		</script>
	</body>
</html>